<template>
	<view class="all-main">
		<view class="main">
			<u-sticky>
				<view class="top">
					<view class="search">
						<view class="lefts">
							<u-search placeholder="搜索SN" :showAction="false" @focus="searchShow = true"
								v-model="keyword"></u-search>
						</view>
						<view class="rights">
							<text @click="stateShow = true">状态查询</text>
						</view>
					</view>
					<view v-if="batch==1" class="operating">
						<view class="lefts">
							<text>统计：{{total}}</text>
						</view>
						<view class="rights" @click="batchClick" style="display: none;">
							<text v-if="total > 0">批量操作</text>
						</view>
					</view>
					<view v-else class="operating" style="display: none;">
						<view class="lefts">
							<text @click="allSelect">全选</text>
							<text @click="cancelClick">取消</text>
						</view>
						<view class="rights">
							<text @click="brandBatchClick">修改品牌</text>
							<text v-if="userInfo.rate_state == 1 || userInfo.flow_state == 1" @click="rateBatchClick">费率模板</text>
						</view>
					</view>
				</view>
			</u-sticky>
			<view v-if="total > 0" class="list">
				<u-checkbox-group v-model="checkboxVal" placement="column" @change="checkboxChange">
					<view v-for="(item,index) in data" :key="index" class="items">
						<view v-if="batch == 2" class="selectBox">
							<u-checkbox :name="item.sn" :disabled="item.is_bind==2"></u-checkbox>
						</view>
						<view class="sn-info" :class="batch == 1 ? 'width100' : ''">
							<view class="tops">
								<view class="title">
									<u-icon name="integral" size="17" color="#2979ff"></u-icon>
									<text @click="copyFun(item.sn)">{{item.sn}}</text>
								</view>
								<view class="status">
									<text v-if="item.is_bind === 1" class="red">未绑定</text>
									<text v-else-if="item.is_bind === 2" class="green">已绑定</text>
									<text v-else class="purple">已解绑</text>
									<text v-if="item.is_active === 1" class="red">未激活</text>
									<text v-else class="green">已激活</text>
								</view>
							</view>
							<view class="rate-info">
								<view class="item">
									<view class="lefts">
										<text>品牌</text>
										<text>【{{item.product}}】</text>
									</view>
								</view>
								<view class="item">
									<view class="lefts">
										<text>费率</text>
										<text style="color: #fa3534; font-weight: bold;">【{{item.rates}}】</text>
										<!-- <u-icon name="info-circle-fill" color="#909399" size="22" @click="rateLogClick(item)"></u-icon> -->
									</view>
									<view class="rights">
										<!-- <text v-if="item.is_bind == 1" @click="rateClick(item)" class="yellow">更换</text> -->
									</view>
								</view>
								<view class="item">
									<view class="lefts">
										<text>是否有服务费</text>
										<view class="depositBtn">
											<u-button v-if="item.deposit_type == 1" type="success" size="mini">无服务费</u-button>
											<u-button v-else type="error" size="mini">有服务费</u-button>
										</view>
									</view>
									<view class="rights">
										<text v-if="item.is_bind == 1" @click="depositClick(item)" class="yellow">切换</text>
									</view>
								</view>
								<view v-if="item.deposit_type == 2" class="item">
									<view class="lefts">
										<text>服务费</text>
										<view class="depositBtn">
											<u-button type="error" size="mini">{{item.deposit_money}}</u-button>
										</view>
									</view>
									<view class="rights">
										<text v-if="item.is_bind == 1" @click="depositMoneyClick(item)" class="yellow">切换</text>
									</view>
								</view>
								<view v-if="item.deposit_type == 2" @click="depositLog(item)" class="item-log">
									<text>服务费变更记录</text>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
			<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
			</u-empty>
			<u-action-sheet :actions="list" @select="selectClick" :show="stateShow" cancelText="取消"
				@close="stateShow = false">
			</u-action-sheet>
			<u-popup :show="searchShow" mode="top" @close="searchShow = false" :closeOnClickOverlay="false">
				<view class="search-tc">
					<view class="top">
						<u-subsection :list="typeList" mode="subsection" :current="current"
							@change="sectionChange"></u-subsection>
					</view>
					<view class="mains">
						<view v-if="type === 1" class="item">
							<view class="items">
								<view class="lefts">
									<u--input placeholder="请输入SN" border="surround" v-model="sn"></u--input>
								</view>
								<view class="rights">
									<!-- #ifdef APP -->
									<u-icon name="scan" size="45" @click="start_scan_one"></u-icon>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<u-icon name="scan" size="45" @click="start_scan_wx_one"></u-icon>
									<!-- #endif -->
								</view>
							</view>
						</view>
						<view v-else class="item">
							<view class="items">
								<view class="lefts">
									<u--input placeholder="请输入开始SN" border="surround" v-model="startSn"></u--input>
								</view>
								<view class="rights">
									<!-- #ifdef APP -->
									<u-icon name="scan" size="45" @click="start_scan"></u-icon>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<u-icon name="scan" size="45" @click="start_scan_wx"></u-icon>
									<!-- #endif -->
								</view>
							</view>
							<view class="items">
								<view class="lefts">
									<u--input placeholder="请输入结束SN" border="surround" v-model="endSn"></u--input>
								</view>
								<view class="rights">
									<!-- #ifdef APP -->
									<u-icon name="scan" size="45" @click="end_scan"></u-icon>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<u-icon name="scan" size="45" @click="end_scan_wx"></u-icon>
									<!-- #endif -->
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="confirm btn" @click="searchClick">
							<text>确定</text>
						</view>
						<view class="cancel btn" @click="searchShow = false">
							<text>关闭</text>
						</view>
					</view>
				</view>
			</u-popup>
			<u-picker :show="depositMoneyTmpshow" :columns="depositMoneyTmp" keyName="title" @confirm="depositMoneyTmpSelect" closeOnClickOverlay @cancel="depositMoneyTmpshow = false" @close="depositMoneyTmpshow = false"></u-picker>
			<u-picker :show="rateTmpShow" :columns="rateTmp" keyName="title" @confirm="rateTmpSelect" closeOnClickOverlay @cancel="rateTmpShow = false" @close="rateTmpShow = false"></u-picker>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request.js');
	/*#ifdef H5*/
	import wx from 'weixin-js-sdk';
	/*#endif*/
	export default {
		data() {
			return {
				searchShow: false,
				stateShow: false,
				brandShow: false,
				rateShow: false,
				flowFeeShow: false,
				creditRateShow: false,
				sn: '',
				startSn: '',
				endSn: '',
				total: 0,
				product_id: null,
				keyword: '',
				checkboxVal: [],
				batch: 1,
				bottom: true,
				page: 1,
				data: [],
				list: [],
				brandList: [],
				typeList: ['单机具', '批量'],
				current: 0,
				type: 1,
				terminalData: null,
				brandCode: '',
				brandName: '',
				flowFeeList: [],
				flowFeeIndex: [0],
				rateList: [],
				rateIndex: [0],
				temRate: {
					additionalPro: 0,
					debitRate: '',
					fdMoney: 0,
					scanRate: '',
					ysfRate: ''
				},
				flowFee: '',
				flowFeeTxt: '请选择',
				creditRate: '',
				creditRateTxt: '请选择',
				userInfo: {},
				depositMoneyTmpshow: false,
				depositMoneyTmp: [],
				depositSn: '',
				rateTmpShow: false,
				rateTmp: [],
				rateItem: {},
			}
		},
		onLoad(e) {
			this.product_id = e.id
			this.getTerminalState()
			this.getUserInfo()
			this.loadData()
			// 注入验证配置
			/*#ifdef H5*/
			this.injectConfig()
			/*#endif*/
			this.getDepositMoneyTmp()
			this.getHzyRateTmp()
		},
		//上拉加载
		onReachBottom() {
			if (this.bottom == true) {
				this.page += 1
				this.loadData()
			}
		},
		methods: {
			// 搜索确定
			searchClick() {
				if (this.type == 1) {
					if (this.sn == '') {
						uni.showToast({
							title: '请输入终端SN号',
							duration: 1000,
							icon: "none"
						});
						return false
					}
				} else {
					if (this.startSn == '') {
						uni.showToast({
							title: '请输入开始SN号',
							duration: 1000,
							icon: "none"
						});
						return false
					}
					if (this.endSn == '') {
						uni.showToast({
							title: '请输入结束SN号',
							duration: 1000,
							icon: "none"
						});
						return false
					}
				}
				this.page = 1
				this.bottom = true
				this.data = []
				this.loadData()
				this.searchShow = false
			},
			// 切换批量
			sectionChange(index) {
				if (this.current != index) {
					this.checkboxVal = []
					this.current = index
					this.type = index + 1
				}
			},
			// 终端状态选择
			selectClick(index) {
				this.status = index.type
				this.page = 1
				this.bottom = true
				this.checkboxVal = []
				this.loadData()
				this.stateShow = false
			},
			// checkbox单个选中
			checkboxChange(n) {
				this.checkboxVal = n
			},
			// 批量点击
			batchClick() {
				this.batch = 2
			},
			// 取消批量
			cancelClick() {
				this.batch = 1
				this.checkboxVal = []
			},
			// 全选
			allSelect() {
				var _this = this
				if (this.checkboxVal.length != this.data.length) {
					this.checkboxVal = []
					this.data.forEach(function(item){
						_this.checkboxVal.push(item.sn)
					})
				} else {
					this.checkboxVal = []
				}
			},
			// 复制终端号
			copyFun(sn) {
				uni.setClipboardData({
					data: sn,
					success: function() {}
				});
			},
			// 获取终端状态
			async getTerminalState() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getTerminalState'
				});
				if (res.code == 200) {
					this.list = res.data
				}
			},
			// 获取服务费模版
			async getDepositMoneyTmp() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getDepositMoneyTmp'
				});
				if (res.code == 200) {
					this.depositMoneyTmp = [res.data]
				}
			},
			// 页面数据展示
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyEquipList',
					data: {
						page_size: 15,
						page: this.page,
						sn: this.sn,
						startSn: this.startSn,
						endSn: this.endSn,
						type: this.type,
						status: this.status,
						product_id: this.product_id
					},
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.total = res.data.total
					if (res.data.data !== undefined && res.data.data !== null && res.data.data.length >
						0) {
						if (this.page == 1) {
							this.data = res.data.data
						} else {
							this.data = [...this.data, ...res.data.data]
						}
					} else {
						this.bottom = false
					}
				}
			},
			// 获取用户信息
			async getUserInfo() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'user/getUserInfo'
				});
				if (res.code == 200) {
					uni.setStorageSync('userinfo', res.data);
					this.userInfo = res.data
				}
			},
			// 获取微信配置
			injectConfig() {
				let url = window.location.href;
				uni.request({
					url: util.API_URL + '/api/v1/test',
					method: 'post',
					data: {
						url: encodeURIComponent(url)
					},
					success: (res) => {
						const data = res.data
						if (data.code == 200) {
							wx.config({
								debug: false, // 开启调试模式,
								appId: data.data.appId, // 必填，企业号的唯一标识
								timestamp: data.data.timestamp, // 必填，生成签名的时间戳
								nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
								signature: data.data.signature, // 必填，签名
								jsApiList: data.data.jsApiList, // 必填，需要使用的JS接口列表
							});
							wx.ready(() => {})
							wx.error(function(err) {
								console.log(err) //wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
							});
						}
					},
					fail(err) {}
				});
			},
			// 单个 - APP扫码
			start_scan_one() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						_this.sn = res.result
					}
				});
			},
			// 单个 - 微信扫码
			start_scan_wx_one() {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (resultrow[0] == 'CODE_128') {
							_this.sn = resultrow[1]
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			// 批量 - APP扫码 - 开始
			start_scan() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						_this.startSn = res.result
					}
				});
			},
			// 批量 - 微信扫码 - 开始
			start_scan_wx() {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (resultrow[0] == 'CODE_128') {
							_this.startSn = resultrow[1]
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			// 批量 - APP扫码 - 结束
			end_scan() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						_this.endSn = res.result
					}
				});
			},
			// 批量 - 微信扫码 - 结束
			end_scan_wx() {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (resultrow[0] == 'CODE_128') {
							_this.endSn = resultrow[1]
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			// 点击押金切换
			depositClick(item) {
				var _this = this
				uni.showModal({
					title: '提示',
					content: '确定要切换终端服务费模式吗？',
					success: function(res) {
						if (res.confirm) {
							_this.depositFun(item)
						} else if (res.cancel) {}
					}
				});
			},
			// 点击切换服务费
			depositMoneyClick(item) {
				this.depositSn = item
				this.depositMoneyTmpshow = true
			},
			// 选择服务费模版
			depositMoneyTmpSelect(data) {
				if (data.value[0].title*100 != this.depositSn.deposit_money*100) {
					this.depositMoneyTmpSelectFun(data.value[0].title)
					this.depositMoneyTmpshow = false
				} else {
					uni.showToast({
						title: '终端服务费未变动!',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			// 服务费模版提交
			async depositMoneyTmpSelectFun(data) {
				var _this = this
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/depositMoneyTmpSelectFun',
					data: {
						id: this.depositSn.id,
						sn: this.depositSn.sn,
						money: data
					},
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 200) {
					setTimeout(function() {
						_this.page = 1
						_this.bottom = true
						_this.loadData()
					},1000)
				}
			},
			// 服务费变更记录
			depositLog(item) {
				uni.navigateTo({
					url: '/pages/hzy/teminal/depositlog?sn=' + item.sn
				})
			},
			// 提交押金切换
			async depositFun(item) {
				var _this = this
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/depositSwitch',
					data: {
						id: item.id,
						sn: item.sn
					},
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 200) {
					setTimeout(function() {
						_this.page = 1
						_this.bottom = true
						_this.loadData()
					},1000)
				}
			},
			// 跳转费率记录
			rateLogClick(item) {
				uni.navigateTo({
					url: '/pages/hzy/team/rateLog?type=2&sn=' + item.sn
				})
			},
			// 获取费率模版
			async getHzyRateTmp() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyRateTmp'
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.rateTmp = [res.data]
				}
			},
			// 点击费率更换
			rateClick(item) {
				this.rateItem = item
				this.rateTmpShow = true
			},
			// 选择费率
			rateTmpSelect(e) {
				var _this = this
				if (e.value[0].value == this.rateItem.rates) {
					uni.showToast({
						title: "终端费率未变更",
						duration: 1000,
						icon: "none"
					});
				} else {
					_this.rateTmpShow = false
					uni.showModal({
						title: '提示',
						content: '确定要更换终端费率吗？',
						success: function(res) {
							if (res.confirm) {
								_this.editHzyRateFun(e.value[0].value)
							} else if (res.cancel) {
								_this.rateTmpShow = true
							}
						}
					});
				}
			},
			// 费率修改提交
			async editHzyRateFun(rate) {
				var _this = this
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/editHzyRateFun',
					data: {
						id: this.rateItem.id,
						sn: this.rateItem.sn,
						rates: rate,
						rate_type: 2
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 1000,
					icon: "none"
				});
				if (res.code == 200) {
					setTimeout(function() {
						_this.loadData()
					}, 1500)
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F6FC;
	}

	.all-main {
		.main {
			.top {
				background-color: #ffffff;
				padding: 0 20rpx;

				.search {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 1px solid #f4f4f5;

					.rights {
						font-size: 28rpx;

						text {
							padding: 10rpx 20rpx;
							background-color: #909399;
							color: #ffffff;
							border-radius: 16rpx;
						}
					}
				}

				.operating {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;

					.lefts {
						color: #82848a;

						text {
							padding: 4rpx 20rpx;
							border: 1px solid #82848a;
							border-radius: 10rpx;
						}

						text:nth-child(2) {
							border: 1px solid #fa3534;
							color: #fa3534;
							margin-left: 20rpx;
						}
					}

					.rights {
						text {
							padding: 4rpx 20rpx;
							border-radius: 10rpx;
						}

						text:nth-child(1) {
							border: 1px solid #2979ff;
							color: #2979ff;
						}

						text:nth-child(2) {
							margin-left: 20rpx;
							border: 1px solid #ff9900;
							color: #ff9900;
						}
					}
				}
			}

			.list {
				margin-top: 20rpx;
				padding: 0 20rpx;

				.items {
					padding: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 16rpx;
					background-color: #ffffff;
					box-shadow: 0 0 16px -14px #333;
					display: flex;
					align-items: center;

					.selectBox {
						width: 10%;
					}

					.sn-info {
						width: 90%;

						.tops {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-bottom: 20rpx;
							border-bottom: 1px solid #f4f4f5;

							.title {
								display: flex;
								align-items: center;

								text {
									font-weight: bold;
									padding-left: 6rpx;
									font-size: 26rpx;
								}
							}

							.status {
								font-size: 24rpx;

								text {
									padding: 4rpx 10rpx;
									color: #ffffff;
									border-radius: 8rpx;
									margin-left: 10rpx;
								}

								.red {
									background-color: #fa3534;
								}

								.green {
									background-color: #19be6b;
								}
								
								.purple {
									background-color: #a233c6;
								}
							}
						}

						.rate-info {

							.item {
								padding: 30rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								font-size: 28rpx;
								border-bottom: 1px solid #f4f4f5;
								
								.lefts {
									display: flex;
									align-items: center;
									
									.depositBtn {
										padding-left: 20rpx;
									}
								}

								.rights {
									text {
										font-size: 24rpx;
										padding: 4rpx 20rpx;
										border-radius: 8rpx;
										margin-left: 20rpx;
									}

									.blue {
										border: 1px solid #2979ff;
										color: #2979ff;
									}

									.yellow {
										border: 1px solid #ff9900;
										color: #ff9900;
									}
								}
							}
							
							.item-log {
								font-size: 24rpx;
								padding: 30rpx;
								color: #2979ff;
							}
						}
					}

					.width100 {
						width: 100% !important;
					}
				}
			}

			.search-tc {
				.top {
					padding: 30rpx;
				}
				
				.mains {
					padding: 0 30rpx;
					
					.item {
						.items {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 30rpx;
							
							.lefts {
								width: 85%;
							}
							
							.rights {
								display: flex;
								justify-content: flex-end;
								width: 15%;
							}
						}
					}
				}
				
				.bottom {
					padding: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.btn {
						color: #ffffff;
						padding: 10rpx;
						border-radius: 16rpx;
						width: 45%;
						text-align: center;
					}
					
					.confirm {
						background-color: #2979ff;
					}
					
					.cancel {
						background-color: #909399;
					}
				}
			}
		
			.rate-main {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				
				.main {
					width: 80%;
					background-color: #ffffff;
					border-radius: 16rpx;
					padding: 30rpx;
					
					.rate-close {
						display: flex;
						justify-content: flex-end;
						padding-bottom: 20rpx;
					}
					
					.rate-items {
						padding: 20rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.rights {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							
							text {
								color: #82848a;
								font-size: 28rpx;
								padding-right: 10rpx;
							}
						}
					}
					
					.border-bottom {
						border-bottom: 1px solid #f4f4f5;
					}
					
					.btn {
						background-color: #2979ff;
						color: #ffffff;
						font-size: 36rpx;
						padding: 30rpx;
						border-radius: 20rpx;
						text-align: center;
						margin-top: 30rpx;
					}
				}
			}
		}
	}
</style>